<template>
  <view class="sidebar" :class="{ 'is-collapsed': isCollapsed }">
    <view @click="toggleCollapse" class="toggle-icon">
      <u-icon :name="isCollapsed ? 'play-left-fill' : 'play-right-fill'" size="24" color="#ffffff"></u-icon>
    </view>
    <view class="nav-container" v-if="!isCollapsed">
      <view class="nav-item" @click="navigateBack">
        <u-icon name="skip-back-left" size="28" color="#ffffff"></u-icon>
        <text style="color: #fff;font-size: 22rpx;">返回</text>
      </view>
      <view class="nav-item" @click="navigateHome">
        <u-icon name="home-fill" size="28" color="#ffffff"></u-icon>
        <text style="color: #fff;font-size: 22rpx;">主页</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isCollapsed: false,
    };
  },
  methods: {
    toggleCollapse() {
      this.isCollapsed = !this.isCollapsed;
    },
    navigateBack() {
      uni.navigateBack();
    },
    navigateHome() {
      uni.reLaunch({ url: '/pages/index/index' });
    },
  },
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 80%;
  right: 0;
  transform: translateY(-50%);
  height: 115rpx;
  width: auto;
  background-color: #6c5ce7; /* 美化: 渐变背景 */
  background-image: linear-gradient(to right, #e73033, #fe177f);
  border-radius: 10rpx 0 0 10rpx; /* 圆角 */
  display: flex;
  align-items: center;
  box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  padding: 0 10rpx; /* 侧边栏内部留白 */
}

.toggle-icon {
  width: 45rpx;
  height: 60rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
}

.nav-container {
  display: flex;
  align-items: center;
  margin-left: 20rpx;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-right: 20rpx;
  transition: transform 0.3s ease;
}

.nav-item u-icon {
  margin-bottom: 5rpx;
}

.text {
  color: #ffffff; /* 文本颜色 */
  font-size: 14rpx; /* 文本大小 */
}

.sidebar:not(.is-collapsed) .toggle-icon {
  transform: rotate(180deg); /* 展开时，旋转切换图标 */
}

.sidebar:not(.is-collapsed) .nav-container {
  opacity: 1; /* 展开时，渐显导航项 */
}
</style>
